<template>
	<div class="box" style="padding: 0; margin: 0; background: #fff">
		<div style="height: 5px"></div>

		<div style="padding: 0 10px; box-sizing: border-box; width: 100%; height: 7%">
			<div class="inp" style="border: 1px solid #aaa">
				<input type="text" placeholder="搜索用户" v-model="userName" @input="getUserList()" />
			</div>
		</div>

		<ul class="list">
			<li v-for="(item, index) in userList" :key="index">
				<div class="header">
					<div class="left">
						<image :src="item.headImage" mode=""></image>
						<p>{{ item.nickname }}</p>
					</div>

					<div class="right">
						<span @click="$router(`/pages/user/userInfo?id=${item._id}`)" style="margin-right: 10px; color: #047DD6;">编辑</span>
						<span @click="del(item)" v-if="item._id != '66794a7555b3372a1f80e1e1'">注销</span>
					</div>
				</div>

				<!-- 授权状态码 -->
				<van-cell-group>
					<van-cell icon="shop-o">
						<view slot="title">
							<view class="van-cell-text">用户名</view>
						</view>
						<div slot='right-icon'>
							<span>{{item.userName || '---'}}</span>
						</div>
					</van-cell>

					<van-cell icon="shop-o">
						<view slot="title">
							<view class="van-cell-text">邮箱</view>
						</view>
						<div slot='right-icon'>
							<span>{{item.email || '---'}}</span>
						</div>
					</van-cell>

					<van-cell icon="shop-o">
						<view slot="title">
							<view class="van-cell-text">留言</view>
						</view>
						<div slot='right-icon'>
							<span>{{item.ramk || '---'}}</span>
						</div>
					</van-cell>

					<van-cell icon="shop-o">
						<view slot="title">
							<view class="van-cell-text">账号</view>
						</view>
						<div slot='right-icon'>
							<span>{{item.accountNumber || '---'}}</span>
						</div>
					</van-cell>

					<van-cell icon="shop-o">
						<view slot="title">
							<view class="van-cell-text">密码</view>
						</view>
						<div slot='right-icon'>
							<span>{{item.password || '---'}}</span>
						</div>
					</van-cell>
				</van-cell-group>
			</li>
		</ul>


		<button class="amusingBtn" @click="addUser">
			<van-icon name="add-o" style="margin-right: 5px"></van-icon>添加用户
		</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				userName: "",
			};
		},

		onShow() {
			this.getUserList();
		},

		methods: {
			async getUserList() {
				let result = await this.$axios("overallSituation", {
					state: "look",
					databaseName: "userList",
					userName: this.userName,
				});

				this.userList = result.data;
			},

			// 添加用户
			addUser() {
				uni.navigateTo({
					url: "/pages/user/userInfo?isAdd=add",
				});
			},

			look(item) {
				uni.navigateTo({
					url: `/pages/user/userInfo?isAdd=look&id=${item._id}`,
				});
			},

			// 删除
			async del(item) {
				uni.showModal({
					title: "提示",
					content: "您要进行的操作？",
					confirmText: "删除", //这块是确定按钮的文字
					cancelText: "取消", //这块是取消的文字
					success: (res) => {
						if (res.confirm) {
							this.$axios("overallSituation", {
								state: "delete",
								databaseName: "userList",
								...item,
							}).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: "删除成功",
										icon: "none",
									});

									if (item.userName == uni.getStorageSync("userInfo").userName) {
										uni.clearStorageSync("userInfo");
										uni.reLaunch({
											url: "/pages/login/index",
										});
									}

									this.getUserList();
								}
							});
						}
					},
				});
			},
		},
	};
</script>

<style scoped>
	.list {
		width: 100%;
		height: 86%;
		padding: 5px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.list li {
		width: 100%;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;
		justify-content: space-between;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
		border-radius: 5px;
	}

	.list li .header {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #999;
	}

	.list li .header .left {
		height: 100%;
		width: 50%;
		display: flex;
		align-items: center;
	}

	.list li .header .right {
		height: 100%;
		display: flex;
		width: 50%;
		align-items: center;
		justify-content: flex-end;
	}

	.list li .header .right span {
		font-size: 12px;
		font-weight: 700;
		color: red;
	}

	.list li .header .left image {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
		margin-right: 8px;
	}

	.list li .header .left p {
		font-size: 12px;
		font-weight: 700;
	}
</style>